import React, { useEffect, useState } from 'react'
import { bannerList, serviceList, newListApi } from "../service/homeService"
import { useNavigate } from "react-router-dom"
import NavbarCom from '../components/NavbarCom'
import InputCom from '../components/home/InputCom'
import Banner from '../components/home/Banner'
import GridCom from '../components/home/Grid'
import Hot from '../components/home/Hot'
import New from '../components/home/New'


export default function Home(props: any) {
    const [bannerlist, setbannerlist] = useState([]);//轮播图的集合
    const [servicelist, setservicelist] = useState([]);//服务的集合

    // 分页
    const [page, setpage] = useState({ pageNum: 1, pageSize: 10 })

    // 新闻列表
    const [newList, setnewList] = useState([])

    let navigate = useNavigate();

    let search = async () => {//页面加载请求数据
        let res = await bannerList({ type: 2 });
        let res2 = await serviceList({});
        let res3 = await newListApi({ pageNum: page.pageNum, pageSize: page.pageSize });
        // console.log(res3);
        setnewList(res3.data.rows)

        // console.log(res2);
        setbannerlist(res.data.rows);
        if (res2.data.rows?.length > 9) {
            setservicelist(res2.data.rows.splice(0, 9).concat([{
                imgUrl: "/prod-api/profile/upload/image/2022/05/05/ceeff962-25f6-4a09-92d1-279af2e1d1e1.png",
                serviceName: "更多服务", id: 0, link: "service"
            }]));
        } else {
            setservicelist(res2.data.rows);
        }
    }

    useEffect(() => {
        search();
    }, []);
    let gotoPath = (item: any) => {
        navigate("/" + item.link);
    }
    let gotoRouter = (url: string) => {
        navigate(url)
    }
    const back = () => {
        console.log('返回');
    }

    return (
        <div className='home-all'>
            <NavbarCom children={"智慧城市"} backArrow={false} back={back}></NavbarCom>
            <InputCom></InputCom>
            <Banner bannerlist={bannerlist}></Banner>
            <GridCom servicelist={servicelist} gotoPath={gotoPath}></GridCom>
            <Hot></Hot>
            <New gotoRouter={gotoRouter} newList={newList}></New>
        </div>
    )
}
